import React from 'react';
import { Layout, Menu, Row, Col, Input } from 'antd';
import {
    MailOutlined,
    CalendarOutlined,
    AppstoreOutlined,
    SettingOutlined,
    LinkOutlined,
    SearchOutlined,
} from '@ant-design/icons';
import logo from '@/assets/logo-title.png';
import FullDiv from './full-div';
import style from './left-menu-content.layout.module.css';
import {connect} from "react-redux";

const LeftContentLayout: React.FC<any> = (props: any) => {
    const { mode = 'inline', theme = 'dark', children } = props;
    return (
        <Layout className={style.layout}>
            <Row justify="space-between">
                <Col>
                    <Row justify="space-between" className={style.side} style={{ flexDirection: 'column', }}>
                        <Col>
                            <img alt="" src={logo} style={{ maxWidth: '100%' }} />
                        </Col>
                        <Col>
                            <Input size="small"
                                className={style.searchMenuInput}
                                suffix={<SearchOutlined />}
                            />
                        </Col>
                        <Col flex="1" style={{ position: 'relative' }}>
                            <FullDiv>
                                <Menu
                                    style={{ width: '100%', height: '100%' }}
                                    defaultSelectedKeys={['1']}
                                    defaultOpenKeys={['sub1']}
                                    mode={mode}
                                    theme={theme}
                                >

                                </Menu>
                            </FullDiv>
                        </Col>
                    </Row>
                </Col>
                <Col flex="1">
                    <Row justify="space-between" style={{ flexDirection: 'column', height: '100%' }}>
                        <Col className={style.fixedHeader}>
                            Fixed header
                        </Col>
                        <Col flex="1">
                            <FullDiv>
                                {children}
                                {/* {[...Array(100).keys()].map(r => <div>body content{r}...</div>)} */}
                            </FullDiv>
                        </Col>
                        <Col className={style.fixedFooter}>
                            Fixed Footer
                        </Col>
                    </Row>
                </Col>
            </Row>
        </Layout>
    );
};

export default connect(({  user,  }:{user:any}) => ({user}))(LeftContentLayout);
